<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>函数式写法</title>
</head>
<body>
<div id="app">
    <h1>姓：{{ familyName }}</h1>
    <h1>名：{{ givenName }}</h1>

    <!--思考一下：这样写有哪些潜在的问题-->
    <!--要么是英文格式正确，要么是中文格式正确-->
    <!--<h1>姓名：{{ familyName }} {{ givenName }}</h1>-->
    <h1>姓名：{{ familyName + " " + givenName }}</h1>

    <!--通过不同语言返回不同的格式来解决-->
    <!--调用函数必须加上 () -->
    <h1>姓名：{{ name }}</h1>

    <!--函数重复执行的问题——每次需要得到姓名的时候，都需要调用函数一次。-->
    <!--解决方法：把 fullName 赋值给一个变量-->
    <!--修改姓 或者 名的时候，姓名没有同步更新-->
    <h1>姓名：{{ name }}</h1>
    <h1>姓名：{{ name }}</h1>
    <h1>姓名：{{ name }}</h1>
    <h1>姓名：{{ name }}</h1>

</div>

<script type="module">
    import {createApp, ref} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let familyName = ref("kevin")
                let givenName = ref("abcque")

                let language = ref("英文")

                function fullName() {
                    console.log("调用了 fullName");
                    if (language.value === "英文") {
                        return familyName.value + " " + givenName.value
                    } else {
                        return familyName.value + givenName.value
                    }

                }

                let name = fullName()

                return {
                    familyName, givenName, fullName, language, name,
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>